<template>
  <div v-loading="loading" class="salary-trend-chart">
    <CommonChart :options="chartOptions" height="100%" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue"
import type { EChartsOption } from "echarts"
import CommonChart from "./CommonChart.vue"
import { getSalaryDataApi } from "@/interface"
import { colorManager } from "@/utils/colorMap"

interface Props {
  provinces: string[]
}

const props = defineProps<Props>()

const loading = ref(false)
// 薪资水平对比图配置
const salaryData = ref<Record<string, any>>({})
const chartOptions = computed<EChartsOption>(() => {
  if (!salaryData.value || !salaryData.value.provinceTrends) return {}

  // 根据 province 筛选省份数据
  const filteredProvinceTrends = salaryData.value.provinceTrends.filter((item: any) =>
    props.provinces.includes(item.name)
  )

  const otherSeries = filteredProvinceTrends.map((item: any) => {
    return {
      name: item.name,
      type: "line",
      data: item.data.map((item: any) => item.value)
    }
  })

  return {
    title: {
      text: "平均起薪对比",
      left: "start"
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      type: "scroll",
      top: 0,
      right: "0%",
      width: "50%",
      data: ["全国平均", ...filteredProvinceTrends.map((item: any) => item.name)]
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: salaryData.value.years,
      axisLabel: {
        rotate: 0
      }
    },
    yAxis: {
      type: "value",
      data: salaryData.value.nationalTrend.map((item: any) => item.year)
    },
    series: [
      {
        name: "全国平均",
        type: "line",
        data: salaryData.value.nationalTrend.map((item: any) => item.value),
        itemStyle: {
          color: "#000000"
        },
        lineStyle: {
          color: "#000000"
        }
      },
      ...otherSeries
    ],
    grid: {
      left: "3%",
      right: "4%",
      bottom: "0%",
      top: "20%",
      containLabel: true
    }
  }
})

// 可以根据需要自定义要显示的省份
const DEFAULT_PROVINCES = ["北京市", "上海市", "广东省", "浙江省", "江苏省", "天津市", "重庆市", "四川省"]

const getSalaryData = () => {
  loading.value = true
  getSalaryDataApi()
    .then((res: any) => {
      salaryData.value = res
    })
    .finally(() => {
      loading.value = false
    })
}

onMounted(() => {
  getSalaryData()
})
</script>

<style scoped>
.salary-trend-chart {
  width: 100%;
  height: 100%;
}
</style>
